<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      font-size: 0;
    }

    body {
      perspective: 1000px;
    }

    .main {

      height: 1200px;
    }

    .list {
      position: relative;
      padding-top: 600px;
      width: 400px;
      height: 600px;
      margin: 0 auto;
      transform-style: preserve-3d;
      transition: 500ms ease-in;
    }

    .item {
      position: absolute;
      bottom: 0;
      width: 400px;
      height: 600px;
      transform-style: preserve-3d;
      transform-origin: top;
      transform: rotateX(0deg);
      transition: 1.5s ease-in;
    }

    .page-img {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 400px;
      height: 600px;
    }

    .front {
      z-index: 100;
    }

    button {
      font-size: 20px;
    }
  </style>
</head>
<body>
<div class="main">
  <ul class="list">
    <li class="item">
      <img src="http://wx3.sinaimg.cn/mw690/c5131475ly1fj22y6b46nj20m80b4mx0.jpg" class="page-img front">
      <img src="http://wx1.sinaimg.cn/mw690/6f86dff2gy1finrexen6qg205k05jb2c.gif" class="page-img back">
    </li>
    <li class="item">
      <img src="http://wx1.sinaimg.cn/mw690/6f86dff2gy1finrexen6qg205k05jb2c.gif" class="page-img front">
      <img src="http://wx1.sinaimg.cn/mw690/648f6403gy1fj1wrixepaj20qo0zkds0.jpg" class="page-img back">
    </li>
    <li class="item">
      <img src="http://wx2.sinaimg.cn/mw690/9b7d8157gy1fj2qfzsoqjj20h70chgnf.jpg" class="page-img front">
      <img src="http://wx3.sinaimg.cn/mw690/006yiDbvgy1fj1wtkl9klj30u01hc17e.jpg" class="page-img back">
    </li>
    <li class="item">
      <img src="http://wx2.sinaimg.cn/mw690/9b7d8157gy1fj2qfz67urj20j60bsac9.jpg" class="page-img front">
      <img src="http://wx3.sinaimg.cn/mw690/006yiDbvgy1fj1wu2vr5bj30qh0yqn9q.jpg" class="page-img back">
    </li>
    <li class="item">
      <img src="http://wx2.sinaimg.cn/mw690/9b7d8157gy1fj2qfxow4bj20hr0k7tca.jpg" class="page-img front">
      <img src="http://wx2.sinaimg.cn/mw690/cc4db942ly1fj2poodxquj20sg1dcqd1.jpg" class="page-img back">
    </li>
    <li class="item">
      <img src="http://wx1.sinaimg.cn/mw690/9b7d8157gy1fj2qfwh8ucj20j60ivq6y.jpg" class="page-img front">
      <img src="http://wx3.sinaimg.cn/mw690/9b7d8157gy1fj2r20zudhj20c8096dg1.jpg" class="page-img back">
    </li>
  </ul>
  <button id="upward">向上</button>
  <button id="down">向下</button>
  <button id="revolution">转</button>
</div>
<script>
  var pageNum = 1
  document.getElementById('upward').onclick = function () {
    var items = document.getElementsByClassName('item')
    var last = items[items.length - pageNum]
    last.style.transform = 'rotateX(' + (180 - pageNum) + 'deg)'
    pageNum++
    setTimeout(function () {
      last.getElementsByClassName('back')[0].style.zIndex = '200'
    }, 1000)
  }

  document.getElementById('down').onclick = function () {
    if (pageNum <= 1) {
      return
    }
    pageNum--
    var items = document.getElementsByClassName('item')
    var last = items[items.length - pageNum]
    last.style.transform = 'rotateX(0deg)'
    setTimeout(function () {
      last.getElementsByClassName('back')[0].style.zIndex = '1'
    }, 1000)
  }
  var revolution = 0
  document.getElementById('revolution').onclick = function () {
    if (pageNum <= 1) {
      return
    }
    var list = document.getElementsByClassName('list')[0]
    revolution = revolution ? 0 : 1
    list.style.transform = 'rotateZ(' + (revolution ? '0' : '180') + 'deg)'
  }
</script>
</body>
</html>
